/*
 * @Description  :
 * @Author       : BuGua
 * @Date         : 2021-08-02 15:03:17
 * @LastEditors  : BuGua
 * @LastEditTime : 2021-08-09 10:59:04
 */
import styles from '../index.less'
import React, { FC, useEffect, useState, useRef } from 'react';
import { Space, message, Button, Popconfirm, Image } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { connect } from 'umi';
import { ConnectState, LoginLayoutProps } from '@/models/connect';
import AddModal from './component/addUser'
import TableComponent from '@/components/tableComponent';
import monent from 'moment'
import UsePagination from '@/hook/UsePagination'

import { selectUser } from '@/services/login'

import { useRequest } from 'ahooks';

const SystemPage: FC<LoginLayoutProps> = ({ dispatch }) => {

	interface useRefChildren {
		showModal: (e: any) => void
	}
	const childRef = useRef<useRefChildren>()

	interface DataType {
		key: string;
		title: string,
		dataIndex?: string,
		render?: (e: any, b: any, c: any) => void
	}
	interface pageType<T> {
		pageSize: number,
		currentPage: number,
		pageAll: number,
		data: Array<T> | []
	}
	interface resArr {
		creatTime?: string,
		id: number,
		imageUrl: string,
		password: string,
		updateTime: string,
		username: string
	}

	interface resType {
		code: number,
		data: pageType<resArr>,
		message: string
	}

	const columns: Array<DataType> = [
		{
			title: "头像",
			dataIndex: 'imageUrl',
			key: 'imageUrl',
			render: (text) =>
				<Image
					width={50}
					height={50}
					src={text}
				/>
		},
		{
			title: '用户名',
			dataIndex: 'username',
			key: 'username',
			// render: (text) => <a>{text}</a>,
		},
		{
			title: '创建时间',
			dataIndex: 'creatTime',
			key: 'creatTime',
			render: (text) => <a>{text && monent(text).format('YYYY-MM-DD HH:mm:ss')}</a>,
		},
		{
			title: '修改时间',
			dataIndex: 'updateTime',
			key: 'updateTime',
			render: (text) => <a>{text && monent(text).format('YYYY-MM-DD HH:mm:ss')}</a>,
		},
		{
			title: '操作',
			key: 'action',
			render: (a, b) => (
				<Space size="middle">
					<a onClick={() => { update(a) }}>修改 </a>
					<Popconfirm
						title={`你确定删除${a.username}嘛？`}
						onConfirm={() => { confirm(a) }}
						okText="确定"
						cancelText="取消"
					>
						<a>删除</a>
					</Popconfirm>
				</Space>
			),
		},
	];

	// const [loading, setLoading] = useState(false)
	const [tableData, setTableData] = useState([])
	const [page, setPage] = useState({
		pageSize: 10,
		currentPage: 1,
		pageAll: 0
	})
	useEffect(() => {
		// selectUser(page)
		run(page)
	}, [])

	const { loading = false, run,refresh } = useRequest(selectUser, {
		manual: true,
		onSuccess: (result, params) => {
			if (result) {
				let data: any = []
				result.data.data.forEach((item: any, index: Number) => { data.push({ ...item, key: `${index}` }) })
				setTableData(data)
				setPage({ ...result.data })
			}
		},
	});



	//查
	// const selectUser = (e: any) => {
	// 	setLoading(true)
	// 	dispatch({
	// 		type: 'login/selectUser',
	// 		payload: e
	// 	}).then((res: resType) => {
	// 		setLoading(false)
	// 		console.log(res, 'res');
	// 		if (res && res.code === 200) {
	// 			let data: any = []
	// 			res.data.data.forEach((item: any, index: Number) => { data.push({ ...item, key: `${index}` }) })
	// 			setTableData(data)
	// 			setPage({ ...res.data })
	// 		} else {
	// 			res.message && message.error(res.message);
	// 		}
	// 	})
	// }
	//增
	const addUser = (e: any) => {
		dispatch({
			type: 'login/addUser',
			payload: {
				...e
			}
		}).then((res: any) => {
			if (res && res.code === 200) {
				run(page)
				message.success("添加成功")
			} else {
				res && res.message && message.error(`${res.message}`);
			}
		})
	}
	//删
	const confirm = (e: any) => {
		delUser({
			user_ids: [e.id]
		})
	};
	const delUser = (e: any) => {
		dispatch({
			type: 'login/delUser',
			payload: {
				...e
			}
		}).then((res: any) => {
			if (res && res.code === 200) {
				run(page)
				message.success("删除成功")
			} else {
				res.message && message.error(`${res.message}`);
			}
		})
	}

	const updateUser = (e: any) => {
		dispatch({
			type: 'login/updateUser',
			payload: {
				...e
			}
		}).then((res: any) => {
			if (res && res.code === 200) {
				run(page)
				message.success("修改成功")
			} else {
				res.message && message.error(`${res.message}`);
			}
		})
	}
	//分页
	const pageChage = (e: any) => {
		run({ ...page, currentPage: e.current })
	}
	//改
	const update = (e: any) => {
		childRef.current && childRef.current.showModal(e)
	}

	return (
		<div className={styles.contnet}>
			<div>
				<Button onClick={refresh}>刷新</Button>

				<AddModal addUser={addUser} childRef={childRef} updateUser={updateUser} />
				<TableComponent
					loading={loading}
					columns={columns}
					dataSource={tableData}
					pagination={{ total: page.pageAll }}
					onChange={pageChage}
				/>
			</div>
		</div>
	);
}
export default connect(({ login }: { login: ConnectState }) => ({ login }))(SystemPage); 